<template>
	<el-drawer v-model="visible" title="更新附件" :size="1200" :with-header="false">
		<el-divider> 上传模板压缩包 </el-divider>
		<el-upload
			ref="fileUploadRef"
			class="file-uploader"
			:action="fileUploadUrl"
			:before-upload="beforeZipUpload"
			:on-success="handleZipSuccess"
			:auto-upload="false"
			:on-exceed="handleExceed"
			:file-list="dataForm.atachFileList"
			:limit="1"
		>
			<template #trigger>
				<el-button type="primary">选择模板压缩包zip文件</el-button>
			</template>
			<el-button class="ml-3" type="success" @click="uploadZipFile">上传到服务器</el-button>
			<template #tip>
				<div class="el-upload__tip">只能上传10M以下的zip文件</div>
			</template>
		</el-upload>
		<el-divider> 更新说明 </el-divider>

		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" @keyup.enter="submitHandle()">
			<el-row>
				<el-col :span="12">
					<el-form-item label="模板描述" prop="readmeContent">
						<el-input v-model="dataForm.readmeContent" type="textarea" rows="20" cols="50" placeholder="模板描述" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="描述展示">
						<div v-html="renderedMarkdown"></div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">提交</el-button>
		</template>
	</el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { ElMessage } from 'element-plus/es'
import type { UploadInstance, UploadProps } from 'element-plus'
import MarkdownIt from 'markdown-it'
import { useGen_template_treeApi, useGen_template_treeSubmitApi } from '@/api/genTemplateTree'

const PUBLIC_URL = import.meta.env.VITE_API_URL
const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()

const dataForm = reactive({
	id: '',
	templateZip: '',
	readmeFile: '',
	readmeContent: '',
	atachFileList: []
})

const dataRules = ref({
	readmeContent: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

const init = (row: any) => {
	visible.value = true
	dataForm.id = row.id

	getTemplateTree(row.id)
}

const mdi = new MarkdownIt({
	html: false,
	linkify: true
})

// 处理并渲染Markdown内容
const renderedMarkdown = computed(() => {
	return mdi.render(dataForm.readmeContent)
})

const getTemplateTree = (id: number) => {
	useGen_template_treeApi(id).then(res => {
		Object.assign(dataForm, res.data)
	})
}

const fileUploadUrl = PUBLIC_URL + '/gen/fileUpDownLoad/uploadFile/ZIP'
const fileUploadRef = ref<UploadInstance>()

const beforeZipUpload: UploadProps['beforeUpload'] = rawFile => {
	// console.log(rawFile.type)
	if (rawFile.type !== 'application/zip') {
		ElMessage.error('Base package picture must be zip format!')
		return false
	} else if (rawFile.size / 1024 / 1024 > 50) {
		ElMessage.error('Avatar picture size can not exceed 10MB!')
		return false
	}
	return true
}

const handleExceed = () => {
	ElMessage.error('只能上传一个文件!')
}

const handleZipSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
	console.log(response.data)
	dataForm.templateZip = response.data
}

const uploadZipFile = () => {
	fileUploadRef.value!.submit()
}

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate(async (valid: boolean) => {
		if (!valid) {
			return false
		}

		// 先保存
		await useGen_template_treeSubmitApi(dataForm)
		fileUploadRef.value!.clearFiles() //清空上传列表
		dataForm.atachFileList = [] //集合清空

		visible.value = false
	})
}

defineExpose({
	init
})
</script>
